import { ref, watch } from "vue";

// 主题类型定义
export type ThemeType = "cherry" | "lavender" | "mint" | "ocean";

// 主题配置
export const themeConfig = {
  cherry: {
    name: "樱花主题",
    description: "温馨粉色系",
    primaryColor: "#e6b8d6"
  },
  lavender: {
    name: "薰衣草主题",
    description: "优雅紫色系",
    primaryColor: "#dda0dd"
  },
  mint: {
    name: "薄荷主题",
    description: "清新绿色系",
    primaryColor: "#c7f0db"
  },
  ocean: {
    name: "海洋主题",
    description: "宁静蓝色系",
    primaryColor: "#b0e0e6"
  }
};

const THEME_STORAGE_KEY = "app-theme";

export function useTheme() {
  // 从 localStorage 获取保存的主题，默认为樱花主题
  const currentTheme = ref<ThemeType>(
    (localStorage.getItem(THEME_STORAGE_KEY) as ThemeType) || "cherry"
  );

  // 应用主题到 DOM
  const applyTheme = (theme: ThemeType) => {
    document.documentElement.setAttribute("data-theme", theme);
  };

  // 切换主题
  const changeTheme = (theme: ThemeType) => {
    currentTheme.value = theme;
    applyTheme(theme);
    localStorage.setItem(THEME_STORAGE_KEY, theme);
  };

  // 获取当前主题配置
  const getCurrentThemeConfig = () => {
    return themeConfig[currentTheme.value];
  };

  // 监听主题变化，自动应用
  watch(
    currentTheme,
    newTheme => {
      applyTheme(newTheme);
    },
    { immediate: true }
  );

  return {
    currentTheme,
    themeConfig,
    changeTheme,
    getCurrentThemeConfig
  };
}
